<template>
  <div>
    <el-card>
      <div class="select_box">
        <el-row>
          <el-col :span="7">
            <div class="title">工程名称</div>
            <el-input style="width:80%" v-model="selectInfo.name" size="small" placeholder="请输入"></el-input>
          </el-col>
          <el-col :span="7">
            <div class="title">工程编号</div>
            <el-input style="width:80%" v-model="selectInfo.number" size="small" placeholder="请输入"></el-input>
          </el-col>
          <el-col :span="7">
            <div class="title">勘察时间</div>
            <el-date-picker
              style="width:80%"
              v-model="selectInfo.date"
              size="small"
              type="daterange"
              format="yyyy-MM-dd"
              value-format="timestamp"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px;">
          <el-col :span="7">
            <div class="title">工作负责人</div>
            <el-select style="width:80%" size="small" filterable clearable v-model="selectInfo.leader" placeholder="请选择">
              <user-option></user-option>
            </el-select>
          </el-col>
          <el-col :span="7">
            <div class="title">地点</div>
            <el-input style="width:80%" v-model="selectInfo.location" size="small" placeholder="请输入"></el-input>
          </el-col>
          <el-col :span="7">
            <div class="title">勘察单状态</div>
            <el-select style="width:80%" v-model="selectInfo.status" clearable size="small" placeholder="请选择">
              <el-option
                v-for="item in statusList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px;">
          <el-col :span="24">
            <el-button size="small" @click="reset">重置</el-button>
						<el-button type="primary" size="small" @click="handleChangePage">确定</el-button>
          </el-col>
        </el-row>
      </div>
      <div style="margin-top: 20px;">
        <el-row>
          <el-col :span="24" style="display: flex;justify-content: right;">
            <el-button size="small" @click="exportList">导出勘察记录</el-button>
<!--            <el-upload
              style="margin: 0 10px;"
              class="upload-demo"
              :headers="headerToken()"
              :action="importUrl"
              :file-list="fileList"
              :show-file-list="false"
              :on-success="handleSuccess"
              :on-change="handleChange">
              <el-button size="small">批量导入项目</el-button>
            </el-upload>
            <el-button size="small" @click="downloadDemo()">导入模板<i class="el-icon-download el-icon&#45;&#45;right"></i></el-button>
            <el-button size="small" type="primary" @click="detail={}, showDialog=true">新建项目</el-button>
            -->
          </el-col>
        </el-row>
      </div>
      <div class="table_box">
        <el-table ref="multipleTable" :data="tableData" v-loading="loading"
                  @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="45">
          </el-table-column>
					<el-table-column prop="name" label="工程名称">
					</el-table-column>
					<el-table-column prop="number" label="工程编号">
					</el-table-column>
					<el-table-column prop="surveyDate" :formatter="dateFormat" label="勘察日期">
          </el-table-column>
          <el-table-column prop="leaderName" label="工作负责人">
					</el-table-column>
          <el-table-column prop="location" label="地点">
					</el-table-column>
          <el-table-column prop="leaderName" label="勘察单状态">
            <template slot-scope="scope">
							{{ statusList[scope.row.status].label }}
						</template>
					</el-table-column>
					<el-table-column fixed="right" label="操作" width="100" v-if="type==='list'">
						<template slot-scope="scope">
							<el-button @click="detailId=scope.row.id,showDetail=true" type="text" size="small">详情</el-button>
						</template>
					</el-table-column>
          <el-table-column fixed="right" label="操作" width="200" v-else>
						<template slot-scope="scope">
							<el-button @click="detailId=scope.row.id,showDetail=true" type="text" size="small">详情</el-button>
              <div style="display: inline-block;">
                <el-popconfirm
                  style="margin-left: 10px;"
                  confirm-button-text='确定'
                  cancel-button-text='取消'
                  icon="el-icon-info"
                  icon-color="#67c23a"
                  title="是否通过该审核？"
                  @confirm="process(scope.row.id, 2)">
                  <el-button size="small" type="text" :disabled="scope.row.status!=1" slot="reference">通过</el-button>
                </el-popconfirm>
                <el-popconfirm
                  style="margin-left: 10px;"
                  confirm-button-text='确定'
                  cancel-button-text='取消'
                  icon="el-icon-info"
                  icon-color="red"
                  title="是否驳回该审核？"
                  @confirm="process(scope.row.id, 3)">
                  <el-button size="small" type="text" :disabled="scope.row.status!=1" :style="scope.row.status!=1 ? 'color: #C0C4CC;' : 'color: red;'" slot="reference">驳回</el-button>
                </el-popconfirm>
              </div>
						</template>
					</el-table-column>
				</el-table>
        <div class="footer">
          <el-pagination @current-change="handleChangePage" :current-page.sync="page" :page-size="pageSize" layout="prev, pager, next" :total="total"></el-pagination>
        </div>
      </div>
    </el-card>
    <!-- 勘察记录详情 -->
    <el-drawer
			title="勘察记录详情"
			:visible.sync="showDetail"
      :wrapperClosable="false"
      :destroy-on-close="true"
			size="70%"
			:direction="'rtl'">
      <record-detail :detailId="detailId" @close="close"></record-detail>
    </el-drawer>
  </div>
</template>

<script>
import RecordDetail from './recordDetail.vue'
import { getSurveyPage, exportSurvey, auditSurvey } from '@/api/survey/index'
import { parseTime } from '@/utils/index.js'
import UserOption from '@/components/selectOption/users'
import { getDic } from '@/api/utils/index'
export default {
  name: 'pageView',
  components: {
    RecordDetail,
    UserOption
  },
  props:{
    type:{
      type: String
    }
  },

  data() {
    return {
      showDetail: false,
      loading: false,
      selectInfo: {
        name: '',
        number: '',
        date: [],
        leader: null,
        location: '',
        status: null
      },
      checkedList: [],
      statusList: [],
      tableData: [],
      page: 1,
      pageSize: 10,
      total: 0,
      elLoading: false,
      detailId: null
    }
  },
  mounted() {
    this.getDicList()
    this.handleChangePage()
  },
  methods: {
    getDicList() {
      getDic('surveyStatus').then(res => {
        const { data } = res
        for (let i in data) {
          this.statusList.push({
            value: parseInt(i),
            label: data[i]
          });
        }
        // if(this.type != 'list') this.statusList.shift();
      })
    },
    close(refresh) {
      this.showDetail=false
      if(refresh) this.handleChangePage()
    },
    reset() {
      this.selectInfo = {
        name: '',
        number: '',
        date: [],
        leader: null,
        location: '',
        status: null
      }
    },
    //选择导出项目
    handleSelectionChange(val) {
      this.checkedList = val
    },
    exportList() {
      let ids = this.checkedList.map(item => { return item.id })
      let params = {surveyIds: ids, pageNum: this.page, pageSize: this.pageSize}
      this.openLoading()
      exportSurvey(params).then(res => {
        let blob = res
        let reader = new FileReader()
        reader.readAsDataURL(blob)
        reader.onload = (e) => {
          let a = document.createElement('a')
          a.download = '勘察记录'
          a.href = e.target.result
          document.body.appendChild(a)
          a.click()
          document.body.removeChild(a)
        }
        this.closeLoading()
      }).catch(error => {
        this.closeLoading()
      })
    },
    handleChangePage() {
      this.loading = true
      let params = {...this.selectInfo, pageNum: this.page, pageSize: this.pageSize}
      if(params.date && params.date.length > 0) {
        params.startDate = params.date[0]
        params.endDate = params.date[1]
      }
      getSurveyPage(params).then(res => {
        const { data } = res
        this.total = data.total
        this.tableData = data.list
        this.loading = false
      }).catch(error => {
        this.loading = false
        console.log(error)
      })
    },
    process(id, status) {
      auditSurvey({
        bizId: id,
        toStatus: status
      }).then(res=> {
        this.$message({
          type: 'success',
          message: '审核成功'
        })
        this.handleChangePage()
      })
    },
    dateFormat(row, column) {
      var date = row[column.property];
      if(date) {
        return parseTime(date,'{y}-{m}-{d}')
      } else {
        return '-'
      }
    },
    openLoading(){
      this.elLoading = this.$loading({
        lock: true,
        text: '加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
    },
    closeLoading(){
      this.elLoading.close();
    },
  }
}
</script>

<style lang="scss" scoped>
.select_box {
  .title {
    font-size: 15px;
    margin-bottom: 10px;
  }
}
.table_box {
  margin-top: 15px;
  .footer {
    margin-top: 10px;
    text-align: center;
  }
}
</style>
